<template>
  <div class="projectInfo-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback">
    </van-nav-bar>
    <div class="c_container main_container">
      <div class="l_menu">
        <div class="menu_item" v-for="(item,idx) in menuList" :key="idx" :class="{'active':active_idx==idx}" @click="active_idx=idx">
          {{ item.name }}
        </div>
      </div>
      <div class="l_container" v-show="active_idx==0">
        page_{{active_idx}}
      <span class="cfs" >pro_id : {{pro_id}}</span>
      <span class="cfs" >type_id : {{type_id}}</span>
      </div>
      <div class="l_container" v-show="active_idx==1">
        <dwCard v-for="item in dwList" :key="item.id" :dwInfo="item" @showUsers="show_user"></dwCard>
      </div>
      <div class="l_container" v-show="active_idx==2">
        page_{{active_idx}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'projectInfo',
  data() {
    return {
      componentName: '现场监督明细信息',
      pro_id:'0',
      type_id:'0',
      menuList:[
        {name:'基本信息'},
        {name:'从业单位'},
        {name:'附件信息'},
      ],
      active_idx:0,
      dwList:[
        {id:'0',type:'防护设备生产单位',name:'单位名称',corporation:'公司法人',certification:'资质证书',telephone:'联系电话',mail:'1231234@123.com'},
        {id:'1',type:'防护设备生产单位',name:'单位名称',corporation:'公司法人',certification:'资质证书',telephone:'联系电话',mail:'1231234@123.com'},
        {id:'2',type:'防护设备生产单位',name:'单位名称',corporation:'公司法人',certification:'资质证书',telephone:'联系电话',mail:'1231234@123.com'},
        {id:'3',type:'防护设备生产单位',name:'单位名称',corporation:'公司法人',certification:'资质证书',telephone:'联系电话',mail:'1231234@123.com'},
      ]
    }
  },
  methods: {
    goback(){
      this.$router.back(-1);
    },
    show_user(dwid){
      // this.$router.push({
      //   name:''
      // })
      alert(dwid)
    }
  },mounted () {
    this.pro_id = this.$route.params.pid;
    this.type_id = this.$route.params.tid;
  },
}
</script>
<style lang="scss" scoped>
.projectInfo-comp-ct {
  .cfs{
    font-weight: bold;
  }
  .main_container{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    .l_menu{
      flex:1;
      background-image: linear-gradient(
        rgb(100, 186, 230),
        rgb(18, 101, 209));
      .menu_item{
        line-height: 50px;
        font-weight: bold;
        color: #fff;
      }
      .active{
        background-color: #fff;
        color: rgb(26, 86, 197);
      }
    }
    .l_container{
      flex:3;
      overflow-x: auto;
    }
  }
}
</style>
